<script setup>
import { ref, defineProps } from 'vue'
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
	mergeVisible: Boolean
})
const emits = defineEmits(['changeMergeVisible'])
const mergeForm = ref({
	customer: '',
	name: '',
	customerType: 1
})
</script>
<template>
	<el-dialog v-model="props.mergeVisible" width="446px" :before-close="handleClose">
		<template #header>
			<h2 class="dialog-title">合并客户</h2>
		</template>
		<div class="form-item">
			<span>选择线索客户：</span>
			<el-select style="flex: 1" v-model="mergeForm.staff" clearable placeholder="请选择线索客户">
				<template #empty>
					<div class="select-input">
						<p>全部线索客户 (0)</p>
						<el-input v-model="mergeForm.name" :suffix-icon="Search" placeholder="请输线索客户名称" />
						<div class="no-data-wrap">
							<img
								class="empty-img"
								src="../../../../assets/img/img/list-empty.499dbb25961c.png"
								style="width: 100px"
								alt=""
							/>
							<div class="empty-description">当前没有线索客户，快去公海领取吧~</div>
						</div>
					</div>
				</template>
			</el-select>
		</div>
		<div class="primary-selecte">
			<div
				:class="mergeForm.customerType === 1 ? 'primary-item flex-col selected' : 'primary-item flex-col'"
				@click="mergeForm.customerType = 1"
			>
				<div class="top flex-col"><div class="name">请选择</div></div>
				<div class="type flex-row align-center">线索客户</div>
				<img
					src="../../../../assets/img/img/card-checked.5b11cca0326e.png"
					class="selected-icon"
				/>
			</div>
			<div
				:class="mergeForm.customerType === 2 ? 'primary-item flex-col selected' : 'primary-item flex-col'"
				@click="mergeForm.customerType = 2"
			>
				<div class="top flex-col">
					<div class="name">2021</div>
					<div class="count">包含1条数据</div>
				</div>
				<div class="type flex-row align-center">企业微信好友</div>
				<img
					src="../../../../assets/img/img/card-checked.5b11cca0326e.png"
					class="selected-icon"
				/>
			</div>
		</div>
		<div class="tips">
			<span class="icon-wrap"
				><i aria-label="icon: bell" class="anticon anticon-bell icon"
					><svg
						viewBox="64 64 896 896"
						focusable="false"
						class=""
						data-icon="bell"
						width="1em"
						height="1em"
						fill="currentColor"
						aria-hidden="true"
					>
						<path
							d="M816 768h-24V428c0-141.1-104.3-257.8-240-277.2V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.8C336.3 170.2 232 286.9 232 428v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48z"
						></path></svg></i
			></span>
			请选择数据主体
		</div>
		<div class="merge-desc">
			<div class="desc-title">合并说明：</div>
			<p>1、合并后，客户以企微客户的形式保留，客户画像的冲突数据将以所选数据主体为主，不冲突数据全部保留</p>
			<p>2、客户关联企业以数据主体的关联企业为最终结果</p>
			<p>3、标签、跟进记录、商机、订单将自动叠加合并</p>
			<p>4、合并后依旧遵循回收规则，若无有效行为则仍会将线索客户回收</p>
			<p>5、合并后的客户添加时间以企微客户的添加时间为准</p>
			<p>6、一个企微客户最多能与两个线索客户合并</p>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button class="mergr-btn" @click="emits('changeMergeVisible', false)">取消</el-button>
				<el-button class="mergr-btn" type="primary" @click="emits('changeMergeVisible', false)"> 保存 </el-button>
			</span>
		</template>
	</el-dialog>
</template>
<style lang="scss" scoped>
.align-center {
	justify-content: center;
}
.flex-col {
	-webkit-box-pack: start;
	-webkit-box-align: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	align-items: center;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 0;
}
.select-input {
	padding: 20px 32px 0 20px;
	margin-bottom: 10px;
	p {
		margin-bottom: 10px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #595959;
		line-height: 22px;
	}
	.no-data-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 228px;
		.empty-description {
			margin-top: 20px;
			font-size: 14px;
			color: #000000a6;
		}
	}
}
.dialog-title {
	width: 100%;
	color: #262626;
	font-size: 17px;
	text-align: center;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 1px;
}
.form-item {
	display: flex;
	align-items: center;
}
.tips {
	display: flex;
	align-items: center;
	margin-top: 12px;
	padding: 8px 16px;
	width: 100%;
	height: 33px;
	background: #effaff;
	border-radius: 2px;
	color: rgba(0, 0, 0, 0.65);
	font-size: 13px;
	.icon-wrap {
		color: #1890ff;
		margin-top: 2px;
		margin-right: 8px;
	}
}
.primary-selecte {
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	padding-top: 12px;
	.primary-item {
		position: relative;
		width: 46%;
		height: 140px;
		background: #fcfcfc;
		border-radius: 2px;
		border: 1px solid transparent;
		cursor: pointer;
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
		.type {
			display: flex;
			align-items: center;
			height: 32px;
			width: 100%;
			background: #f6f6f6;
			border-radius: 0 0 2px 2px;
			font-size: 13px;
			color: rgba(0, 0, 0, 0.45);
		}
	}
	.top {
		padding-top: 34px;
		-webkit-box-flex: 1;
		flex: 1;
		.name {
			height: 20px;
			line-height: 20px;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.85);
		}
	}
	.selected-icon {
		position: absolute;
		left: 0;
		top: 0;
		width: 30px;
		display: none;
	}
	.primary-item.selected {
		border-color: #add8ff;
		border-bottom: none;
		.type {
			position: absolute;
			bottom: 0;
			left: -1px;
			width: calc(100% + 2px);
			background: #1890ff;
			color: #fff;
		}
		.selected-icon {
			display: block;
			top: -1px;
			left: -1px;
		}
		.top .name {
			color: #1890ff;
		}
	}
	.primary-item:hover {
		border-color: #4398ff;
		background: rgba(239, 250, 255, 0.3);
		box-shadow: 0 8px 17px 0 rgb(146 195 255 / 19%);
	}
}
.merge-desc {
	padding-top: 24px;
	p {
		padding-top: 8px;
		color: rgba(0, 0, 0, 0.85);
		line-height: 20px;
	}
	.desc-title {
		font-weight: 600;
		color: rgba(0, 0, 0, 0.85);
		line-height: 20px;
	}
}
.mergr-btn {
	width: 74px;
	height: 32px;
	border-radius: 2px;
}
</style>
